import React from 'react';
import { Switch } from 'antd';
import { debounce } from 'src/libs/utils';

const LabelSwitch = ( props: any ) => {
	const { label, onValuesChange, name, checked } = props;

	return (
		<div
			style={{
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
			}}
		>
			<label>{label}</label>
			<Switch
				checked={checked}
				onChange={
					debounce( ( value ) => onValuesChange( value, name ), 500 )
				}
			></Switch>
		</div>
	);
};

export default React.memo( LabelSwitch );